<script setup lang="ts">
import { ref, onMounted, nextTick, reactive } from 'vue'
import { useRtcFIle } from './rtc-file'
const { createOffer, pc } = useRtcFIle('https://www.ehrcloud.top:4000', 'fanjiantao')
const messageList = ref([])
const url = ref('')
const dataChanel = pc.createDataChannel('trans-file')
dataChanel.onopen = (event) => {
  console.log('通道打开', event, dataChanel.readyState)
}
dataChanel.onmessage = (event) => {
  console.log('接收消息', event)
}
dataChanel.onclose = () => {
  console.log('结束')
}

pc.ondatachannel = function (event) {
  const channel = event.channel
  channel.onopen = function (event: any) {
    // channel.send("Hi back!");
  }
  channel.onmessage = function (event) {
    console.log(event.data)
    // downloadFile(new Blob([event.data]), 'text.png')
    downloadFile(new Blob([event.data]), 'text.png')
  }
}
const message = ref('')

const sendMessage = () => {
  dataChanel.send(message.value)
  message.value = ''
}

const changeFile = (e) => {
  console.log(e.target.files[0])
  const file = e.target.files[0]
  const reader = new FileReader()
  reader.readAsArrayBuffer(e.target.files[0])
  reader.onload = (e) => {
    const result = e.target?.result
    // console.log(result)
    // dataChanel.send()
    dataChanel.send(result as string)
  }
  // console.log(e.target.files[0].slice(0, 500))
}
const users = ref()
const transbg = ref()
const downloadFile = (blob: Blob, name: string) => {
  const a = document.createElement('a')
  a.href = URL.createObjectURL(blob)
  a.download = name
  a.click()
}

onMounted(() => {
  Array.prototype.forEach.call(transbg.value.children, (element: HTMLElement) => {
    console.log(element.getBoundingClientRect())
    const { top, bottom } = element.getBoundingClientRect()
    console.log(top, bottom)
    Velocity(
      element,
      {
        opacity: 1,
        translateX: 10,
        scale: 1.2
      },
      {
        duration: 3000
      }
    )
  })
})

const toggleDark = () => {
  document.documentElement.classList.toggle('dark')
}
</script>

<template>
  <div class="w-full h-full">
    <button @click="toggleDark">toggleDark</button>
    <div class="user-list w-full h-full" ref="users"></div>
    <div ref="transbg">
      <div
        class="border-solid border border-blue-200 dark:border-gray-700 fixed left-1/2 rounded-full origin-center"
        v-for="index in 7"
        :key="index"
        :style="[
          `width:${index * 200}px`,
          `height:${index * 200}px`,
          `marginLeft:-${(index * 200) / 2}px`,
          `marginTop:-${(index * 200) / 2}px`,
          `bottom:${90 - index * 90}px`
        ]"
      ></div>
    </div>
    <div
      class="item inline-block cursor-pointer flex flex-col justify-center items-center fixed bottom-[45px] left-1/2 -translate-x-1/2"
    >
      <div
        @click="createOffer()"
        class="user-item w-[60px] h-[60px] bg-slate-500 block rounded-full border-2 border-solid border-blue-400"
      ></div>
      <div class="dark:text-white text-center"><input type="file" @change="changeFile" /></div>
    </div>
    <!-- <div class="text-red-600">qeqwe</div>
    <img :src="url" />
    <input type="file" @change="changeFile" />
    <div><button @click="createOffer()">建立通道</button></div>
    <textarea v-model="message"></textarea>
    <button @click="sendMessage" class="text-red-600 dark:text-yellow-600">发送消息</button>
    <ul>
      <li v-for="(item, index) in messageList" :key="index">{{ item }}</li>
    </ul> -->
  </div>
</template>
